<template>
  <div class="setUp_container">
    <div class="setUp_container_title">设置</div>
    <div class="setUp_container_contact">
      <div class="setUp_container_contact_inside">
        <div class="setUp_container_contact_inside_qidong">启动：</div>
        <div class="setUp_container_contact_inside_checkbox">
          <el-checkbox @change="jiancha" :checked="$store.state.PowerOn"
            >开机自动运行</el-checkbox
          >
        </div>
      </div>
      <div class="setUp_container_contact_inside">
        <div class="setUp_container_contact_inside_qidong">关闭主面板：</div>
        <div class="setUp_container_contact_inside_radio">
          <el-radio-group @change="isChange" v-model="$store.state.chooseClose">
            <el-radio label="Tray">最小化到系统托盘</el-radio>
            <el-radio label="close">退出云音乐</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="setUp_container_contact_inside">
        <div class="setUp_container_contact_inside_qidong">定时关机：</div>
        <div style="margin-bottom: 10px">
          <el-switch
            slot="reference"
            v-model="isShutdown"
            active-text="开"
            inactive-text="关"
            @change="Shutdown"
          >
          </el-switch>
        </div>
        <div v-show="isShow" style="display: flex; align-items: center">
          <div style="margin-right: 20px">剩余关机时间</div>
          <div style="margin-right: 20px; display: flex; align-items: center">
            <el-select @change="changeTime" v-model="hourValue">
              <el-option
                v-for="(item, index) in hour"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <div>时</div>
          </div>
          <div style="margin-right: 20px; display: flex; align-items: center">
            <el-select @change="changeTime" v-model="minuteValue">
              <el-option
                v-for="(item, index) in minute"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <div>分</div>
          </div>
        </div>
      </div>
      <div class="setUp_container_contact_inside">
        <div class="setUp_container_contact_inside_qidong">
          快捷键
        </div>
        <div class="kuaijie_title">
          <div class="kuaijie_title_left">
            功能说明
          </div>
          <div class="kuaijie_title_middle">快捷键</div>
        </div>
        <div class="kuaijie_title" style="color:black;align-items: center;">
          <div class="kuaijie_title_left">
            打开/关闭歌词
          </div>
          <div class="kuaijie_title_middle">
            <el-input disabled v-model="opneOrCloseGeCi" />
          </div>
        </div>
        <div class="kuaijie_title" style="color:black;align-items: center;">
          <div class="kuaijie_title_left">
            播放/暂停
          </div>
          <div class="kuaijie_title_middle">
            <el-input disabled v-model="boFangOrZanTing" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      opneOrCloseGeCi: "Ctrl + D",
      boFangOrZanTing:"Ctrl + K",
      isShow: false,
      isShutdown: false,
      hour: [
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        23,
      ],
      minute: [
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20,
        21,
        22,
        23,
        24,
        25,
        26,
        27,
        28,
        29,
        30,
        31,
        32,
        33,
        34,
        35,
        36,
        37,
        38,
        39,
        40,
        41,
        42,
        43,
        44,
        45,
        46,
        47,
        48,
        49,
        50,
        ,
        51,
        52,
        53,
        54,
        55,
        56,
        57,
        58,
        59,
      ],
      hourValue: 0,
      minuteValue: 0,
    };
  },
  methods: {
    Shutdown() {
      if (this.isShutdown == true) {
        this.isShow = true;
        this.$message({
          message: "设置已更新",
          type: "success",
          showClose: true,
        });
      } else {
        this.$message({
          message: "设置已更新",
          type: "success",
          showClose: true,
        });
        this.isShow = false;
        this.hourValue = 0;
        this.minuteValue = 0;
        ipcRenderer.send("closeShutDowm");
      }
    },
    changeTime() {
      this.$message({
        message: "设置已更新",
        type: "success",
        showClose: true,
      });
      let allTime = this.hourValue * 60 * 60 + this.minuteValue * 60;
      ipcRenderer.send("changeTime", allTime);
    },
    isChange(e) {
      this.$store.commit("isChange", e);
      localStorage.setItem("chooseValue", e);
      this.$message({
        message: "设置已更新",
        type: "success",
        showClose: true,
      });
    },
    jiancha() {
      this.PowerOn = !this.PowerOn;
      if (this.PowerOn) {
        localStorage.setItem("PowerOn", this.PowerOn);
        ipcRenderer.send("changeAutoStart-open");
        this.$message({
          message: "设置已更新",
          type: "success",
          showClose: true,
        });
      } else {
        localStorage.setItem("PowerOn", this.PowerOn);
        ipcRenderer.send("changeAutoStart-closed");
        this.$message({
          message: "设置已更新",
          type: "success",
          showClose: true,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../common/css/commonStyle";
.setUp_container {
  width: 95%;
  .setUp_container_title {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 20px;
    font-weight: 800;
  }
  .setUp_container_contact {
    .setUp_container_contact_inside {
      margin-bottom: 20px;
      font-size: 14px;
      .setUp_container_contact_inside_qidong {
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 10px;
      }
    }
  }
}
.kuaijie_title {
  display: flex;
  width: 70%;
  color: #606266;
  font-size: 14px;
  margin-bottom: 25px;
  .kuaijie_title_left {
    width: 20%;
  }
  .kuaijie_title_middle {
    width: 35%;
  }
}
.el-select {
  width: 100px;
  margin-right: 10px;
}
</style>
